<template>
  <div class="home">
    <Menu />
    <h2>用户食谱</h2>
    <div class="container">
      <el-tag type="success" effect="dark">{{this.dietaryPrefer}}</el-tag>
    </div>

    <ForceDirected id="mytest" width="1500" height="600" :nodes="nodes" :edges="edges"></ForceDirected>
    <el-empty v-show="show" description="空空如也"></el-empty>



  </div>




</template>
<script>
import ForceDirected from "@/components/Force-Directed.vue";
import HelloWorld from "@/components/HelloWorld.vue";
import request from '@/utils/request'
export default {
  name: "d3Home",
  components: {
    ForceDirected,
    // eslint-disable-next-line vue/no-unused-components
    HelloWorld,
  },
  created () {
    this.userName=this.$route.params.userName
    console.log('跳转的userName是: '+this.userName)
    this.onGraphLoad()
  },
  data() {
    return {
      // 节点集
      nodes : [],
      // 边集
      edges : [],
      userName:"",
      show:false,
      dietaryPrefer:""
    };
  }
  ,methods: {
    onGraphLoad () {
      request.get('http://localhost:4009/user/loadDietMap', {
        params: {
          userName:this.userName
        }
      }).then(res => {
        console.log(res)
        if (res.status !== 200){
          this.$message.error(res.message)
          this.show=true
        }else {
          this.$message.success(res.message)
          this.nodes=res.nodes
          this.edges=res.edges
          this.dietaryPrefer=res.dietaryPrefer
        }
      })

    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  //height: 100vh; /* 使用100%视口高度来使容器撑满整个屏幕高度 */
}
</style>
